﻿@page "/table-sticky-freeze-hover"

<PageTitle>Css Sticky Table</PageTitle>

<h4>Hover 效果</h4>
<div class="wrapper limitHeight">
    <div class="cd-table-container">
        <table class="table table-bordered table-hover cd-table-sticky mb-0" style="width: 2000px;">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th class="cd-freeze-column" style="width: 80px;">#</th>
                    <th class="cd-freeze-column" style="width: 80px; left: 80px;">First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px; right: 80px;">Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px;">Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 20))
                {
                    <tr class="">
                        <td class="cd-freeze-column">@i</td>
                        <td class="cd-freeze-column" style="left: 80px;">Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td class="cd-freeze-column-r" style="right: 80px;">@@mdo</td>
                        <td class="cd-freeze-column-r">@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<script>
    // 使用Javascript选择最后一个.children元素
    // const children = document.getElementsByClassName('cd-freeze-column');

    // console.log(children);

    // children.style.background = '#fdbb2d';
    // children.style.color = '#333';
    // children.style.transform = 'scale(1.2)';
    // children.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';


    //const lastChild = children[3];

    // 添加样式
    // lastChild.style.background = '#fdbb2d';
    // lastChild.style.color = '#333';
    // lastChild.style.transform = 'scale(1.2)';
    // lastChild.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';
</script>       